.mb-4 {margin-bottom: 4px;}
.mb-8 {margin-bottom: 8px;}
.mb-12 {margin-bottom: 12px;}

/** 图片编辑 */
.doodle-view {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #f1f1f1;
  border-radius: 4px;
}
.doodle-view-content {
  position: relative;
  margin-left: 86px;
  flex: 1;
  border-radius: 4px;
  background: #f1f1f1;
}


.doodle-handle {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 4px;
  background: #fff;
  border-radius: 3px;
  z-index: 3;
  overflow-y: auto;
  overflow-x: hidden;

  .doodle-btn {
    margin-left: 0;
    margin-bottom: 4px;
    // user-select: none;
    // display: inline-block;
    // border: 1px solid #cccccc;
    // border-radius: 4px;
    // padding: 4px 8px;
    // margin: 0 4px;
    // &.current {
    //   background: #fc941d;
    //   border: 1px solid #fc941d;
    //   color: #ffffff;
    // }
    // &.disable {
    //   opacity: 0.4;
    // }
    margin-right: 0;
    .icon {
      margin-right: 4px;
    }
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}


.doodle-handle-option {
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}

.option-line-width {
  .range {
    display: inline-block;
    margin-bottom: 130px;
    transform: translate(-24%, 400%) rotate(-90deg);
  }
  .line-width-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
  }
  .line-width {
    display: inline-block;
    border: 2px solid #eeeeee;
    border-radius: 999px;
    cursor: pointer;
    margin-top: 4px;
  }
}

.doodle-canvas-wrap,
.doodle-canvas,
.doodle-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}
.doodle-canvas {
  cursor: pointer;
  z-index: 2;
}
.doodle-canvas.clear {
  /* cursor: url('/src/assets/icon/eraser.cur') 16 16, auto; */
}

.doodle-btn-cross {
  display: flex;
  justify-content: space-between;
  .doodle-btn {
    padding: 8px 9px;
    margin-left: 0;
  }
}

/* 鼠标点 */
.mouse-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 0;
  top: 0;
  z-index: 9;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none; 
  background: rgba(0,0,0,0.3);
  &.outer {
    display: none;
  }
}

/* 浮动按钮 */
.float-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 4px 10px 4px 6px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 10px;
  text-align: center;
  background: rgb(113, 23, 255);
  border-radius: 999px;
  cursor: pointer;
  z-index: 9;
  .btn-icon {
    font-size: 14px;
    background: #fff;
    color: rgb(113, 23, 255);
    padding: 4px;
    margin-right: 4px;
    border-radius: 999px;
    &.loading {
      transform: rotate(45deg);
      animation: rotation 2s linear infinite;
    }
  }
  .min-font {
    font-size: 8px;
  }
}

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}